<div class="p-24">
  <nz-input-group nzSize="large" [nzPrefix]="prefixTemplateUser" [nzSuffix]="inputClearTpl">
    <input #searchInput type="text" nz-input nzSize="large" placeholder="搜索" [(ngModel)]="inputValue" />
  </nz-input-group>
  <ng-template #inputClearTpl>
    @if (inputValue) {
      <i class="ant-input-clear-icon" nz-icon nzTheme="fill" nzType="close-circle" (click)="clearInput()"></i>
    }
  </ng-template>

  <div class="m-t-15">
    @if (resultListShow.length > 0) {
      <ul>
        @for (item of resultListShow; track item.routePath) {
          <li class="result-item sp-16" nz-row [class.result-item-bg]="item.selItem" [style]="{ color: item.selItem ? 'white' : '' }" (click)="resultClick(item)" (mouseover)="mouseOverItem(item)">
            <div nz-col nzFlex="auto">
              @if (!item.isAliIcon) {
                <i class="m-r-8" nz-icon nzTheme="outline" [nzType]="item.icon!"></i>
              } @else {
                <i class="m-r-8" nz-icon [nzIconfont]="item.icon!"></i>
              }
              <span>{{ item.title }}</span>
            </div>
            @if (item.selItem) {
              <i class="sp-18 m-r-8" nz-col nz-icon nzFlex="30px" nzTheme="outline" nzType="enter" style="color: white"></i>
            }
          </li>
        }
      </ul>
    } @else {
      <nz-empty [nzNotFoundContent]="contentTpl">
        <ng-template #contentTpl>
          <span>请输入菜单名称进行搜索</span>
        </ng-template>
      </nz-empty>
    }
  </div>
</div>

<nz-divider class="m-0"></nz-divider>
<div class="p-l-24 p-t-16 p-b-16">
  <footer class="flex left-start-center">
    <i class="footer-icon" nz-icon nzTheme="outline" nzType="enter"></i>
    确认
    <i class="footer-icon m-l-8" nz-icon nzTheme="outline" nzType="arrow-up"></i>
    <i class="footer-icon m-l-8" nz-icon nzTheme="outline" nzType="arrow-down"></i>
    切换
    <span class="footer-icon sp-12 m-l-8">ESC</span>
    关闭
  </footer>
</div>

<ng-template #prefixTemplateUser><i nz-icon nzType="search"></i></ng-template>
